<template>
  <div>
    <div class="print-container"  id="dy" ref="htmlDom">
      <el-tabs v-model="activeName">
        <!-- 基本资料 -->
        <el-tab-pane label="基本资料" name="first" :key="'first'" >
          <div id="datas" v-if="neweditForm" style="width: 100%;margin: 0 auto;display: flex;justify-content: center">
            <div id="baseData" style="width: 1050px;">
              <div class="base-data">
                <div class="base-title">
                  <span>{{ neweditForm.name }}</span>
                  <span class="m-l-20">高考志愿填报档案表</span>
                </div>

                <div class="base-table">
                  <div class="base-tr title-th"><div class="txt-l">基本信息</div></div>
                  <div class="base-tr-other">
                    <div>学生姓名</div>
                    <div>{{ neweditForm.name }}</div>
                    <div>科类</div>
                    <div>{{ neweditForm.major | filterMajor }}</div>
                    <div>性别</div>
                    <div>{{ neweditForm.sex == 0 ? '男' : '女' }}</div>
                    <div>年龄</div>
                    <div>{{ neweditForm.age }}</div>
                    <div>出生日期</div>
                    <div>{{ neweditForm.birthdayDate }}</div>
                  </div>
                  <div class="base-tr-other">
                    <div>政治面貌</div>
                    <div>{{ neweditForm.politic }}</div>
                    <div>民族</div>
                    <div>{{ neweditForm.nation }}</div>
                    <div>考生类别</div>
                    <div>{{ neweditForm.stuType }}</div>
                    <div>外语语种</div>
                    <div>{{ neweditForm.languagesMsg }}</div>
                    <div>高考年份</div>
                    <div>{{ neweditForm.other }}</div>
                  </div>
                  <div class="base-tr-other">
                    <div style="width: 10%">身高(cm)</div>
                    <div style="width: 10%">{{ neweditForm.height }}</div>
                    <div style="width: 10%">体重(kg)</div>
                    <div style="width: 10%">{{ neweditForm.weight }}</div>
                    <div style="width: 10%">视力</div>
                    <div style="width: 50%">{{ neweditForm.vision }}</div>
                  </div>
                  <div class="base-tr-other">
                    <div style="width: 10%">其他情况</div>
                    <div style="width: 40%">{{ neweditForm.others }}</div>
                    <div style="width: 10%">体检结论</div>
                    <div style="width: 40%">
                      <span v-for="(item, index) in chooseMedical">{{item}}<span v-if="index != (chooseMedical.length - 1)">，</span></span>
                    </div>
                  </div>
                  <div class="base-tr-other">
                    <div style="width: 10%">就读学校</div>
                    <div style="width: 40%">{{ neweditForm.school }}</div>
                    <div style="width: 10%">户籍地址</div>
                    <div style="width: 40%">{{ neweditForm.address }}</div>
                  </div>
                  <div class="base-tr-other" v-for="(item, index) in neweditForm.stuContacts">
                    <div class="w-10">{{index == 0 ? '主联系人' : '次联系人'}}</div>
                    <div class="w-10">{{ item.name }}</div>
                    <div class="w-10">关系</div>
                    <div class="w-10">{{ item.relationship }}</div>
                    <div class="w-10">职业</div>
                    <div class="w-20">{{ item.occupation }}</div>
                    <div class="w-10">电话</div>
                    <div class="w-20">{{ item.phone }}</div>
                  </div>
                  <div class="base-tr title-th"><div class="txt-l">考试成绩</div></div>
                  <div class="base-tr score-tr">
                    <div class="flex-2">考试名称</div>
                    <div class="flex-8">
                      <div>语文</div>
                      <div>数学</div>
                      <div>外语</div>
                      <div>物理</div>
                      <div>化学</div>
                      <div>生物</div>
                      <div>综合</div>
                      <div>总分</div>
                      <div>位次</div>
                      <div>口试</div>
                      <div>备注</div>
                    </div>
                  </div>
                  <div class="base-tr score-tr" v-for="(item, index) in neweditForm.stuAchievements">
                    <div class="flex-2">{{item.examName}}</div>
                    <div class="flex-8">
                      <div>{{item.language ? item.language : '/'}}</div>
                      <div>{{item.mathematics ? item.mathematics : '/'}}</div>
                      <div>{{item.foreignLanguages ? item.foreignLanguages : '/'}}</div>
                      <div>{{item.physics ? item.physics : '/'}}</div>
                      <div>{{item.chemistry ? item.chemistry : '/'}}</div>
                      <div>{{item.biology ? item.biology : '/'}}</div>
                      <div>{{item.comprehensive ? item.comprehensive : '/'}}</div>
                      <div>{{item.totalScore ? item.totalScore : '/'}}</div>
                      <div>{{item.ranking ? item.ranking : '/'}}</div>
                      <div>{{item.oralTest ? item.oralTest : '/'}}</div>
                      <div>{{item.remarks ? item.remarks : '/'}}</div>
                    </div>
                  </div>
                  <div class="base-tr title-th"><div class="txt-l">升学通道</div></div>
                  <div class="base-tr">
                    <div>
                      <div class="txt-l checked-section" v-for="(item, index) in channelsFirstData" :key="index">
                        <div class="checked-box" :class="{'checked-box-active': item.value}" style="width: 100%;">
                          <img v-if="item.value" class="inner-box-active" src="~@/assets/images/icon_check.png" alt="">
                          <div v-else class="inner-box" ></div>
                          <span>{{item.label}}</span>
                        </div>
                      </div>
                    </div>
                    <div>
                      <div class="txt-l checked-section" v-for="(item, index) in channelsSecondData" :key="index">
                        <div class="checked-box" :class="{'checked-box-active': item.value}" style="width: 100%;">
                          <img v-if="item.value" class="inner-box-active" src="~@/assets/images/icon_check.png" alt="">
                          <div v-else class="inner-box" ></div>
                          <span>{{item.label}}</span>
                        </div>
                      </div>
                    </div>
                    <div>
                      <div class="txt-l checked-section" v-for="(item, index) in channelsThirdData" :key="index">
                        <div class="checked-box" :class="{'checked-box-active': item.value}" style="width: 100%;">
                          <img v-if="item.value" class="inner-box-active" src="~@/assets/images/icon_check.png" alt="">
                          <div v-else class="inner-box" ></div>
                          <span>{{item.label}}</span>
                        </div>
                      </div>
                    </div>
                    <div>
                      <div class="txt-l checked-section" v-for="(item, index) in channelsForthData" :key="index">
                        <div class="checked-box" :class="{'checked-box-active': item.value}" style="width: 100%;">
                          <img v-if="item.value" class="inner-box-active" src="~@/assets/images/icon_check.png" alt="">
                          <div v-else class="inner-box" ></div>
                          <span>{{item.label}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="base-tr">
                    <div class="remark-box">{{ neweditForm.remarks }}</div>
                  </div>
                  <div class="base-tr title-th" style="border-bottom: 0;"><div class="txt-l">报考意向</div></div>
                  <div class="base-tr" v-if="neweditForm.examMsg">
                    <div class="intention-apply-tr" >
                      <div class="apply-left" >方案倾向</div>
                      <div class="apply-right" >
                        <div class="b-r-l p-0-10 txt-l checked-section">
                          <div class="checked-box" v-for="(item, index) in neweditForm.examMsg.scheme" :key="index" :class="{'checked-box-active': item.value}">
                            <img v-if="item.value" class="inner-box-active" src="~@/assets/images/icon_check.png" alt="">
                            <div v-else class="inner-box" ></div>
                            <span>{{item.label}}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="base-tr" v-if="neweditForm.examMsg">
                    <div class="intention-apply-tr" >
                      <div class="apply-left" >大学规划</div>
                      <div class="apply-right" >
                        <div class="b-r-l p-0-10 txt-l checked-section">
                          <div class="checked-box" v-for="(item, index) in neweditForm.examMsg.universityPlanning" :key="index" :class="{'checked-box-active': item.value}">
                            <img v-if="item.value" class="inner-box-active" src="~@/assets/images/icon_check.png" alt="">
                            <div v-else class="inner-box" ></div>
                            <span>{{item.label}}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="base-tr" v-if="neweditForm.examMsg">
                    <div class="intention-apply-tr" >
                      <div class="apply-left" >合作办学</div>
                      <div class="apply-right" >
                        <div class="b-r-l p-0-10 txt-l checked-section">
                          <div class="checked-box" v-for="(item, index) in neweditForm.examMsg.cooperativeSchool" :key="index" :class="{'checked-box-active': item.value}">
                            <img v-if="item.value" class="inner-box-active" src="~@/assets/images/icon_check.png" alt="">
                            <div v-else class="inner-box" ></div>
                            <span>{{item.label}}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="base-tr">
                    <div class="intention-apply-tr" v-if="neweditForm.examMsg">
                      <div class="apply-left" >志愿意向</div>
                      <div class="apply-right" >
                        <div class="child-box">
                          <div class="child-left" >意向学校</div>
                          <div class="child-right txt-l" >{{neweditForm.examMsg.intentionApply.schoolName}}</div>
                        </div>
                        <div class="child-box">
                          <div class="child-left" >意向专业</div>
                          <div class="child-right txt-l" >{{neweditForm.examMsg.intentionApply.professionName}}</div>
                        </div>
                        <div class="child-box">
                          <div class="child-left" >意向职业</div>
                          <div class="child-right txt-l" >{{neweditForm.examMsg.intentionApply.occupationName}}</div>
                        </div>
                        <div class="child-box">
                          <div class="child-left" >意向城市</div>
                          <div class="child-right txt-l" >{{neweditForm.examMsg.intentionApply.cityName}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="base-tr title-th"><div class="txt-l">备注说明</div></div>
                  <div class="base-tr">
                    <div class="remark-box">{{neweditForm.others}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧按钮 -->
          <div id="npt">
            <br>
            <el-button style="background-color: #1264ff;color: white;margin-top: 20px;" circle v-print="'#baseData'">打印
            </el-button>
            <br>
            <el-button style="background-color: #7870b6;color: white;margin-top: 20px;" circle @click="getPdf('#datas')">下载
            </el-button>
            <br>
            <el-button style="background-color: green;color: white;margin-top: 20px;" circle @click="goBack()">返回
            </el-button>
          </div>
        </el-tab-pane>
        <!-- 专业方向 -->
        <el-tab-pane label="专业方向" name="second" :key="'second'" style="position: relative;">
          <div id="majors" style="width: 100%;margin: 0 auto;display: flex;justify-content: center">
            <div id="major" class="report-section" style="width: 1050px;">
              <div class="report-content" >
                <div v-show="flag">
                  <div id="show-results" v-if="true">
                    <el-row :gutter="24" id="pdfDom">
                      <el-col>
                        <div class="result-section">
                          <div class="report-title" >
                            <span>{{ neweditForm.name }}</span>
                            <span style="margin-left: 1em;">大学专业方向探索报告</span>
                          </div>
                          <div class="report-desc">
                            选择大学专业对考生未来发展至关重要。考生被喜次、擅长目符合自身特质特点的专业录取，有助于调学习的积极性，主动性，甚至激发潜能，从而给未来的升学或家业打好坚实基础。因此，我们选择从“专业意向度”“学科擅长度”“职业兴趣倾向”三个方面引导考生探索最为适合的大学专业方向。
                          </div>
                          <div>
                            <div class="report-desc-title">
                              一、专业意向度
                            </div>
                            <div>
                              <el-table
                                  :data="chooseMajorList">
                                <el-table-column
                                    type="index"
                                    width="50">
                                </el-table-column>
                                <el-table-column
                                    prop="majorName"
                                    label="门类">
                                </el-table-column>
                                <el-table-column
                                    prop="parentMajorName"
                                    label="专业类">
                                </el-table-column>
                                <el-table-column
                                    prop="score"
                                    label="意向度">
                                  <template slot-scope="scope">
                                    <el-rate v-model="scope.row.score" show-text disabled
                                             :colors="colors" :texts="subjectRateTexts" text-color="#666666" >
                                    </el-rate>
                                  </template>
                                </el-table-column>
                              </el-table>
                            </div>
                          </div>
                          <div>
                            <div class="report-desc-title">
                              二、学科擅长程度
                            </div>
                            <div>
                              做自己擅长的事情通常会比较轻松、高效，反之，则容易焦虑、挫败，由于不同大学专业对学生的能力要求有所不同，所以学生在进择大学专业时务必要评估自己的能力结构是否能支撑学 好所选专业，虽然，各大学专业的课程不同于中学课程，但却与中学课程有着密切的联系，我们可以通过对中学课程的擅长程度来选择大学专业，需要注意的是，在评估擅长程度时，既要 看学业成绩，还要看自己平时的学习表现和感受。
                            </div>
                            <div class="subject-test">
                              <div class="test-content" v-for="item in subjectList">
                                <span class="name">{{ item.name }}</span>
                                <div class="rate-box">
                                  <el-rate v-model="item.score" show-text disabled
                                           :colors="colors" :texts="subjectRateTexts" text-color="#666666" >
                                  </el-rate>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div>
                            <div class="report-desc-title">
                              三、职业兴趣倾向
                            </div>
                            <div class="report-desc">
                              霍兰德职业兴趣测试 (self-Directed Searh) 是由美国职业指导专家兰 Jh holad) 根据他本人大量的职业咨询经验及其职业类型理论编制的测评工具，已经在全世界被) 泛应用。霍兰德认为个人职业兴趣特性与职业之间有一种内在的对应关系，通过测评能够帮助测试者了解自身职业兴趣倾向，从而做好职业规划或大学专业选择。该测试属于典型行为现 试，测试者只要根据自己的真实情况如实作答即可。
                            </div>
                            <div>
                              <p class="txt-c title-set m-t-20">霍兰德职业兴趣倾向测试(SDS)</p>
                              <div class="report-desc">
                                {{resultsData.reportDesc}}
                              </div>
                              <div v-if="svgRadar" id="histogram" class="histogram-section"
                                   :class="{'histogram-section-radar': resultsData.tableSet.tableName==1}"
                                   style="margin: 0 auto;" v-html="svgRadar">
                              </div>
                              <div v-else style="padding: 20px 0;text-align: center;color: #999;">
                                <i class="el-icon-warning-outline" ></i>
                                <span>暂无测评结果</span>
                              </div>
                            </div>
                            <div style="page-break-inside: avoid;">
                              <p class="txt-c summary-title m-t-20">{{ resultsData.tableResult.upContent }}</p>
                              <p class="txt-c summary-title m-t-20" style="font-weight: 600">
                                {{ resultsData.tableResult.downContent }}</p>
                            </div>
                            <div style="page-break-inside: avoid;">
                              <p class="txt-c title-set m-t-20">{{ resultsData.topicReport.titleWarning }}</p>
                              <div class="chart-summary m-t-20"
                                   v-for="(item, index) in resultsData.topicReport.topicReportList">
                                <div class="summary-txt">
                                  {{ item.title }}
                                </div>
                              </div>
                            </div>
                          </div>
                          <div>
                            <div class="report-desc-title">
                              四、专业方向探索结果
                            </div>
                            <div class="m-t-20" v-loading="loading">
                              <div>
                                <div class="report-desc">意向指数、擅长指数、适配指数分别反映了专业意向度、学科擅长度、职业兴趣倾向的测量结果，推荐指数是三个指数的综合计算结果，反映了专业类的匹配程度。推荐指数得分越高，说明该专业类综合匹配度越高。探索结果会按照分数由高到低的顺序展示前 20 个专业类，不足 20 个时按照实际数目展示。</div>
                                <table v-if="results.length > 0" width="100%;" style="margin-bottom: 30px;margin-top: 20px;" id="result">
                                  <tr>
                                    <th>序号</th>
                                    <th>专业(类)名称</th>
                                    <th>意向指数</th>
                                    <th>擅长指数</th>
                                    <th>适配指数</th>
                                    <th>推荐指数</th>
                                  </tr>
                                  <tr v-for="(item,index) in results">
                                    <th style="font-weight: normal;">{{ index + 1 }}</th>
                                    <th style="font-weight: normal;">{{ item.majorName }}</th>
                                    <th>
                                      <el-rate
                                          v-model="item.intention"
                                          disabled
                                          :colors="colors"
                                          text-color="#ff9900"
                                          score-template="{value}">
                                      </el-rate>
                                    <th>
                                      <el-rate
                                          v-model="item.Proficiency"
                                          disabled
                                          :colors="colors"
                                          text-color="#ff9900"
                                          score-template="{value}">
                                      </el-rate>
                                    </th>
                                    <th>
                                      <el-rate
                                          v-model="item.Fitness"
                                          disabled
                                          :colors="colors"
                                          text-color="#ff9900"
                                          score-template="{value}">
                                      </el-rate>
                                    </th>
                                    <th>
                                      <el-rate
                                          v-model="item.recommend"
                                          disabled
                                          :colors="colors"
                                          :icon-classes="iconClasses"
                                          disabled-void-icon-class="icon iconfont icon-aixin">
                                      </el-rate>
                                    </th>
                                  </tr>
                                </table>
                                <div v-else style="padding: 20px 0;text-align: center;color: #999;">
                                  <i class="el-icon-warning-outline" ></i>
                                  <span>专业方向探索结果</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="npt">
            <br>
            <el-button style="background-color: #1264ff;color: white;margin-top: 20px;" circle v-print="'#major'">打印
            </el-button>
            <br>
            <el-button style="background-color: #7870b6;color: white;margin-top: 20px;" circle
                       @click="getPdf('#majors')">下载
            </el-button>
            <br>
            <el-button style="background-color: green;color: white;margin-top: 20px;" circle @click="goBack()">返回
            </el-button>
          </div>
        </el-tab-pane>
        <!-- 志愿方案 -->
        <el-tab-pane label="志愿方案" name="third" :key="'third'">
          <div id="programmes" style="width: 100%;display: flex;justify-content: center;padding-bottom: 30px;" >
            <div style="width: 1050px;padding: 0;" id="programme">
              <div style="width: 100%;font-weight: bold;font-size: 25px;text-align: center;margin-top: 40px;">
                <span>{{ neweditForm.name }}</span>
                <span style="margin-left: 1em;">高考志愿填报方案</span>
              </div>
              <div style="width: 1050px;margin: auto;margin-top: 30px;">
                <div v-if="tableData.length > 0">>
                  <div v-for="(items,index) in tableData">
                    <div style="height: 70px;">
											<span style="line-height: 70px;font-size: 19px;font-weight: bold;">
											<p style="text-align: center;">{{ items[0].programmeName }}</p>
											</span>
                    </div>
                    <div class="d1-2" style="height: 60px;text-align: center;">
                      <span style="font-size: 17px;line-height: 60px;">姓名:</span>
                      <span
                          style="font-size: 17px;line-height: 60px;margin-left: 3px;">{{ neweditForm.name }}</span>
                      <span style="font-size: 17px;line-height: 60px;margin-left:30px">科类:</span>
                      <span style="font-size: 17px;line-height: 60px;margin-left: 3px;">
												<span v-if="neweditForm.major == 1">理科</span>
												<span v-if="neweditForm.major == 2">文科</span>
												<span v-if="neweditForm.major == 3">艺术理</span>
												<span v-if="neweditForm.major == 4">艺术文</span>
											</span>
                      <span style="font-size: 17px;line-height: 60px;margin-left:30px;">批次:</span>
                      <span
                          style="font-size: 17px;line-height: 60px;margin-left: 3px;">{{ items[0].batch }}</span>
                      <span style="font-size: 17px;line-height: 60px;margin-left:30px;">分数:</span>
                      <span
                          style="font-size: 17px;line-height: 60px;margin-left: 3px;">{{ neweditForm.score }}</span>
                      <span style="font-size: 17px;line-height: 60px;margin-left:30px;">位次:</span>
                      <span
                          style="font-size: 17px;line-height: 60px;margin-left: 3px;">{{ neweditForm.precedence }}</span>
                    </div>
                    <table border style="width: 100%;" id="tables">
                      <thead>
                      <tr>
                        <th width="70">序列</th>
                        <th width="60">代码</th>
                        <th>院校名称(录取形式)/专业(类)|包含专业</th>
                        <th width="50">计划</th>
                        <th width="100">学费(元/年)</th>
                      </tr>
                      </thead>
                      <tbody v-for="zhi in items">
                      <tr style="background-color: #d4d4d4;">
                        <td style="text-align: center;font-weight:bolder;">{{ zhi.schemeName }}</td>
                        <td style="text-align: center;font-weight:bolder;">{{ zhi.schoolCode }}</td>
                        <td>
														<span style="margin-left: 10px;font-weight:bolder;">
															{{ zhi.schoolName }}
														</span>
                          <span style="float: right;margin-right: 10px;font-weight:bolder;" v-show="zhi.schoolName">
														<span style="margin-left: 30px;"
                                  v-if="zhi.batch != '提前批A段' && zhi.batch != '提前批B段' && zhi.batch != '提前批C段' && zhi.batch != '提前批专科' && zhi.batch != '一批特殊' && zhi.batch != '二批特殊'">
															{{ zhi.majorPlan }}|
														</span>
														服从调剂：<span>{{ zhi.schemeChange == 0 ? "是" : "否" }}</span>
													</span>
                        </td>
                        <td style="text-align: center;font-weight:bolder;">{{ zhi.plan2022 }}</td>
                        <td></td>
                      </tr>
                      <tr v-for="zy in zhi.majorList">
                        <td style="text-align: center;">{{ zy.sort }}</td>
                        <td style="text-align: center;">{{ zy.majorCode }}</td>
                        <td>
                          <span
                              style="margin-left: 10px;display: inline-block;margin-right: 10px;">{{ zy.majorName }}</span>
                        </td>
                        <td style="text-align: center;">{{ zy.plan2018 }}</td>
                        <td style="text-align: center;">{{ zy.majorLimit }}</td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
                <div v-else style="padding: 20px 0;text-align: center;color: #999;">
                  <i class="el-icon-warning-outline" ></i>
                  <span>暂无填报方案</span>
                </div>
              </div>
            </div>
          </div>
          <div id="npt1">
            <el-button style="background-color: #1264ff;color: white;margin-top: 20px;" circle v-print="'#programme'">打印
            </el-button>
            <br>
            <el-button style="background-color: #7870b6;color: white;margin-top: 20px;" circle
                       @click="getPdf('#programmes')">下载
            </el-button>
            <br>
            <el-button style="background-color: green;color: white;margin-top: 20px;" circle @click="goBack()">返回
            </el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { request } from "@/util/request";
import qs from "qs"
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

// 科类
const MajorData = [
  {
    label: '理科类',
    value: 1
  },
  {
    label: '文科类',
    value: 2
  },
  {
    label: '艺术理',
    value: 3
  },
  {
    label: '艺术文',
    value: 4
  },
]
// 升学渠道
const ChannelsFirstData = [
  {
    label: '强基计划',
    value: false
  },
  {
    label: '综合评价',
    value: false
  },
  {
    label: '港、澳独立招生',
    value: false
  },
  {
    label: '飞行技术专业',
    value: false
  },
  {
    label: '高水平运动队',
    value: false
  },
  {
    label: '高校专项计划',
    value: false
  },
  {
    label: '空乘、民航空中安保',
    value: false
  }
];
const ChannelsSecondData = [
  {
    label: '军队院校',
    value: false
  },
  {
    label: '公安本科专业',
    value: false
  },
  {
    label: '中国消防救援学院',
    value: false
  },
  {
    label: '司法本科专业',
    value: false
  },
  {
    label: '定向培养军士',
    value: false
  },
  {
    label: '公安高职 (专科) 专业',
    value: false
  },
  {
    label: '免费医学定向生',
    value: false
  }
];
const ChannelsThirdData = [
  {
    label: '北京电子科技学院',
    value: false
  },
  {
    label: '公费师范生',
    value: false
  },
  {
    label: '优师专项',
    value: false
  },
  {
    label: '航海类专业',
    value: false
  },
  {
    label: '小语种',
    value: false
  },
  {
    label: '种子科学与工程',
    value: false
  },
  {
    label: '全国重点马克思主义学院',
    value: false
  }
];
const ChannelsForthData = [
  {
    label: '国家专项计划',
    value: false
  },
  {
    label: '地方专项计划',
    value: false
  },
  {
    label: '定向就业',
    value: false
  },
  {
    label: '民族班',
    value: false
  },
  {
    label: '少数民族预科班',
    value: false
  },
  {
    label: '四川大学预科班',
    value: false
  },
  {
    label: '边防军子女预科班',
    value: false
  },
];

export default {

  data() {
    return {
      loading: false,
      // tab 导航
      activeName: "first",
      // 基本资料
      channelsFirstData: ChannelsFirstData.concat([]),
      channelsSecondData: ChannelsSecondData.concat([]),
      channelsThirdData: ChannelsThirdData.concat([]),
      channelsForthData: ChannelsForthData.concat([]),
      neweditForm: null,
      printOption: {
        id: 'baseData', // 打印元素的id 不需要携带#号
      },
      chooseMedical: [], // 体检结论
      // 专业方向 start
      testName: '',
      flag: true,
      userId: null,
      subjectList: [],
      colors: ['#F96630', '#F96630', '#F96630'],
      majorRateTexts: ['不喜欢', '能接受', '有意向', '喜欢', '特喜欢'],
      subjectRateTexts: ['很不擅长', '不太擅长', '中等水平', '比较擅长', '特别擅长'],
      iconClasses: ['icon iconfont icon-aixin', 'icon iconfont icon-aixin', 'icon iconfont icon-aixin'],
      chooseMajorList: [],
      // 专业方向 end
      neweditFormm: [],
      tableData: null,
      newtableData: null,
      result: [],
      results: [],
      Majorx: [],
      stuId: '',
      resultsData: {
        id: "",
        testId: "",
        reportDesc: "",
        isShowReportDesc: 0,
        tableSet: {},
        isShowTableSet: 0,
        tableResult: {},
        isShowTableResult: 0,
        topicReport: {},
        isShowTopicReportList: [],
        moreSuggestTitle: "",
        moreSuggest: "",
        isShowMoreSuggest: 0,
        reportResult: {},
        isShowReportResult: 0,
        lastImage: [],
        isShowLastImage: []
      },
      htmlTitle: '测评',
      testId: 1,
      chartThemeColor: ['#37A2DA', '#dd6b66', '#c23531', '#4EA397', '#8D98B3'], // 图表色系
      svgRadar: ''
    }
  },
  filters: {
    filterMajor(value) {
      const major = MajorData.find((item) => item.value == value)
      return major.label
    },
  },
  mounted() {
  },
  methods: {
    // 返回
    goBack() {
      this.$router.go(-1)
    },
    // 下载pdf
    getPdf(url) {
      let title = ''
      if (url == '#programmes') {
        title = this.neweditForm.name + "方案信息";
        window.open(`${this.$constants.serverUrl}/mendaoVoluntary/stuScheme/getPrintSchemePdf?stuId=` + this.stuId);
        return;
      } else if (url == '#datas') {
        title = this.neweditForm.name + "高考志愿填报档案表";
      } else if (url == '#newschool') {
        title = this.neweditForm.name + "选科方案";
      } else if (url == '#majors') {
        title = this.neweditForm.name + "专业方向";
      }

      html2Canvas(document.querySelector(url), {
        allowTaint: true,
        taintTest: false,
        logging: false,
        useCORS: true,
        dpi: window.devicePixelRatio * 1.5, //将分辨率提高到特定的DPI 提高四倍
        // dpi:300,
        scale: 1.5 //按比例增加分辨率
      }).then(canvas => {
        var pdf = new JsPDF('p', 'mm', 'a4');    //A4纸，纵向

        var ctx = canvas.getContext('2d'),
        a4w = 260, a4h = 280,    //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
        imgHeight = Math.floor(a4h * canvas.width / a4w),    //按A4显示比例换算一页图像的像素高度
        renderedHeight = 0;
        ctx.mozImageSmoothingEnabled = false;
        ctx.webkitImageSmoothingEnabled = false;
        ctx.msImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;
        while (renderedHeight < canvas.height) {
          var page = document.createElement("canvas");
          page.width = canvas.width;
          page.height = Math.min(imgHeight, canvas.height - renderedHeight);//可能内容不足一页

          //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
          page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
          pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', -25, 10, a4w, Math.min(a4h, a4w * page.height / page.width));    //添加图像到页面，保留10mm边距

          renderedHeight += imgHeight;
          if (renderedHeight < canvas.height) {
            pdf.addPage();//如果后面还有内容，添加一个空页
          }
        }
        //保存文件
        pdf.save(title + '.pdf')

      })
    },
    // 专家版获取学生所有高考填报方案
    getPrintScheme () {
      request({
        method: 'POST',
        url: 'stuScheme/getPrintScheme',
        params: {
          stuId: this.stuId
        }
      }).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          for (let j = 0; j < res.data[i].length; j++) {
            res.data[i][j].majorList = res.data[i][j].majorList ? JSON.parse(res.data[i][j].majorList) :
                []
            if (res.data[i][j].majorList === null || res.data[i][j].majorList === '' || res.data[i][j].majorList.length < 1 || res.data[i][j].majorList === undefined) {
              res.data[i][j].majorList = [{'majorName': '', 'majorCode': '', "sort": ''}]
            }
            if (res.data[i][j].batch == '提前批A段' || res.data[i][j].batch == '提前批B段' || res.data[i][j].batch == '提前批C段' || res.data[i][j].batch == '提前批专科' || res.data[i][j].batch == '一批特殊' || res.data[i][j].batch == '二批特殊') {
              res.data[i][j].majorPlan = null
            }
          }
        }
        this.tableData = res.data
        for (let m = 0; m < this.tableData.length; m++) {
          for (let s = 0; s < this.tableData[m].length; s++) {
            this.tableData[m][s].majorList.sort((a, b) => {
              return a['sort'].localeCompare(b['sort'])
            })
          }
        }
        for (let m = 0; m < this.tableData.length; m++) {
          for (let s = 0; s < this.tableData[m].length; s++) {
            let sortList = []
            let bList = []
            for (var i = 0; i < this.tableData[m][s].majorList.length; i++) {
              if (this.tableData[m][s].majorList[i].sort == "备选") {
                bList.push(this.tableData[m][s].majorList[i])
              } else {
                sortList.push(this.tableData[m][s].majorList[i])
              }
            }
            bList.forEach(i => {
              sortList.push(i)
            })
            this.tableData[m][s].majorList = sortList
          }
        }
      })
    },
    // 学生版获取学生所有高考填报方案
    getPrintNewScheme () {
      request({
        method: 'POST',
        url: 'stuNewSchoolScheme/getPrintNewScheme',
        params: {
          stuId: this.stuId
        }
      }).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          for (let j = 0; j < res.data[i].length; j++) {
            res.data[i][j].majorList = res.data[i][j].majorList ? JSON.parse(res.data[i][j].majorList) :
                []
            if (res.data[i][j].majorList === null || res.data[i][j].majorList === '' || res.data[i][j].majorList.length < 1 || res.data[i][j].majorList === undefined) {
              res.data[i][j].majorList = [{'majorName': '', 'majorCode': '', "sort": ''}]
            }
          }
        }
        this.newtableData = res.data
      })
    },
    // 专业方向探索结果
    showResult () {
      this.loading = true
      request({
        method: 'post',
        url: 'stuMajorResult/showResult',
        data: {
          stuMajorRel: this.Majorx,
          stuSubjectRel: this.subjectList,
          mathTests: this.resultsData.tableSet.tableTestMsg
        }
      }).then(res => {
        this.results = res.data
        this.loading = false
      })
    },
    // 专业方向--获取专业
    getMajor() {
      request({
        method: 'get',
        url: 'majorCategoryInfo/getMajor',
        params: {
          pageNum: 1,
          pageSize: 999999,
          stuId: this.stuId
        }
      }).then(res => {
        this.Majorx = res.data;
        this.getStuMajor()
      })
    },
    // 专业意向--学科擅长程度
    getStuMajor() {
      request({
        method: 'get',
        url: 'stuMajorRel/getStuMajor',
        params: {
          stuId: this.stuId
        }
      }).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          for (let j = 0; j < this.Majorx.length; j++) {
            if (res.data[i].maojorId == this.Majorx[j].id) {
              this.$set(this.Majorx[j], "score", res.data[i].score)
              this.$set(this.Majorx[j], "relId", res.data[i].id)
            }
          }
        }
        this.Major = JSON.parse(JSON.stringify(this.Majorx))
        this.getMendaoStu()

        if (res.data) {
          let list = []
          res.data.forEach(item => {
            if (item.score > 0) {
              list.push(item)
            }
          })
          this.chooseMajorList = list
        }
      })
    },
    // 专业方向
    getSubjectName() {
      request({
        method: 'Get',
        url: 'subjectInfo/getSubjectName',
      }).then(res => {
        this.subjectList = res.data
        this.getStuSubject()
      })
    },
    getStuSubject() {
      request({
        method: 'get',
        url: 'stuSubjectRel/getStuSubject',
        params: {
          stuId: this.stuId
        }
      }).then(res => {
        for (let s = 0; s < this.subjectList.length; s++) {
          this.$set(this.subjectList[s], "score", 0)
        }
        for (let i = 0; i < res.data.length; i++) {
          for (let j = 0; j < this.subjectList.length; j++) {
            if (res.data[i].subjectId == this.subjectList[j].id) {
              this.$set(this.subjectList[j], "score", res.data[i].score)
              this.$set(this.subjectList[j], "relId", res.data[i].id)
            }
          }
        }
      })
    },
    // 获取测评详情
    getTestDetail () {
      request({
        method: 'get',
        url: 'mendao/getTestById',
        params: {
          data: JSON.stringify({
            testId: this.testId
          })
        }
      }).then((res) => {
        if (res.code === 1) {
          this.testName = res.data.testName;
          this.htmlTitle = this.testName;
        } else {
          this.$message.error(res.data.message);
        }
      }).catch((res) => {
      });
    },
    // 获取体检结论
    getNotAdmitted () {
      request({
        method: 'POST',
        url: 'stuArchivesRel/getNotAdmitted',
        params: {
          stuid: this.neweditForm.id
        }
      }).then(res => {
        let list = []
        res.data.xz.forEach(i => {
          list.push(i.code.toString())
        })
        this.chooseMedical = list
      })
    },
    // 查询学生测评记录
    getMendaoStu () {
      request({
        method: 'get',
        url: 'mendao/getMenDaoStu',
        params: {
          phone: this.neweditForm.id
        }
      }).then(res => {
        if (res.code == 0 || res.code == 200) {
          if (res.data) {
            if (this.neweditFormm != null && res.data != null) {
              this.neweditFormm = res.data
              this.getResultDetails();
            } else {
              this.flag = false
            }
          } else {
            this.$message({
              message: res.msg,
              type: 'warning'
            });
          }
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    // 查看提交的测评结果信息
    getResultDetails () {
      request({
        method: 'post',
        url: 'mendao/showCommitTest',
        data: {
          testId: this.testId,
          stuId: this.neweditFormm.id
        }
      }).then((res) => {
        if (res.code === 1) {
          this.resultsData = res.data;
          this.resultsData.reportResult = JSON.parse(res.data.reportResult)
          this.getTestReportDetail()
        } else {
          this.$message.error(res.data.message);
        }
      }).catch((res) => {
      });
    },
    // 获取测评结果详情
    getTestReportDetail() {
      request({
        method: 'get',
        url: 'mendao/getTestReport',
        params: {
          data: JSON.stringify({
            testId: this.testId
          })
        }
      }).then((res) => {
        if (res.code === 1) {
          // 整理题组标题
          if (this.resultsData.topicReport.topicReportList) {
            for (let i = 0; i < this.resultsData.topicReport.topicReportList.length; i++) {
              let titleObj = {
                text: this.resultsData.topicReport.topicReportList[i].title
              };
              this.resultsData.topicReport.topicReportList[i].formatTitle = titleObj;
            }
          }

          // moreSuggest
          if (this.resultsData.moreSuggest) {
            for (let i = 0; i < this.resultsData.moreSuggest.length; i++) {
              let suggestTitle = {
                text: this.resultsData.moreSuggest[i].title
              };
              this.resultsData.moreSuggest[i].formatTitle = suggestTitle;
            }
          }
          if (this.resultsData.reportResult.title && this.resultsData.isShowReportResult == 1) {
            let resultTitle = {
              text: this.resultsData.reportResult.title
            };
            this.resultsData.reportResult.formatTitle = resultTitle;
          }
          // 图标数据
          this.chartsInfo();
          this.showResult()
        } else {
          this.$message.error(res.message);
        }
      }).catch((res) => {
      });
    },
    // 图表设置
    chartsInfo() {
      // 获取色系 chartThemeColor
      let chartColor = '#c23531';
      if (this.resultsData.tableSet.tableColor) {
        chartColor = this.chartThemeColor[this.resultsData.tableSet.tableColor - 1]
      }

      let baryAxisData = [];
      let barSeriesData = [];
      let radaryAxisData = [];
      let radarSeriesData = [];
      let maxNum = 0;

      for (let i = 0; i < this.resultsData.tableSet.tableTestMsg.length; i++) {
        let yObj = {
          name: this.resultsData.tableSet.tableTestMsg[i].unitName,
          max: 5
        };
        if (this.resultsData.tableSet.tableTestMsg[i].unitScore == 'null') {
          this.resultsData.tableSet.tableTestMsg[i].unitScore = '0';
        }
        maxNum = (maxNum - this.resultsData.tableSet.tableTestMsg[i].unitScore) > 0 ? maxNum : this.resultsData
            .tableSet.tableTestMsg[i].unitScore;
        baryAxisData.push(this.resultsData.tableSet.tableTestMsg[i].unitName);
        barSeriesData.push(this.resultsData.tableSet.tableTestMsg[i].unitScore);
        radaryAxisData.push(yObj);
        radarSeriesData.push(this.resultsData.tableSet.tableTestMsg[i].unitScore);
      }

      radaryAxisData.forEach(e => {
        e.max = maxNum;
      });

      // 获取图标类型
      if (this.resultsData.tableSet.tableName == 2) { // 条形图
        setTimeout(() => {
          this.barChartUtil(chartColor, baryAxisData, barSeriesData);
        }, 100);
      } else if (this.resultsData.tableSet.tableName == 1) { // 雷达图
        setTimeout(() => {
          this.radarChartUtil(chartColor, radaryAxisData, radarSeriesData);
        }, 100);
      }

    },
    // 条形图
    barChartUtil(chartColor, yAxisData, seriesData) {
      let histogramDom = document.getElementById("histogram");
      let histogramChart = this.$echarts.init(histogramDom);
      seriesData = seriesData.reverse();
      yAxisData = yAxisData.reverse();
      histogramChart.setOption({
        color: [chartColor],
        title: {
          text: this.resultsData.tableTitle ? this.resultsData.tableTitle : '图表数据',
          textAlign: 'left',
          textStyle: {
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'normal',
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01,],
          max: 100
        },
        yAxis: {
          type: 'category',
          data: yAxisData,
        },
        grid: {
          left: 70
        },
        series: [{
          type: 'bar',
          data: seriesData,
        }]
      }, true);
    },
    // 雷达图
    radarChartUtil(chartColor, yAxisData, seriesData) {
      for (let i = 0; i < yAxisData.length; i++) {
        yAxisData[i].max = 10;
      }

      let chatOption = {
        color: [chartColor],
        title: {
          text: this.resultsData.tableTitle ? this.resultsData.tableTitle : '图表数据',
          subtext: '',
          // textAlign:'center',
          textStyle: {
            fontSize: 14,
            lineHeight: 20,
          },
          // 标题的位置，此时放在图的底边
          left: 'center',
          top: 'top',
        },
        tooltip: {},
        radar: {
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5],
              textAlign: "center"
            }
          },
          indicator: yAxisData
        },
        series: [{
          type: 'radar',
          data: [{
            value: seriesData,
            name: this.resultsData.tableTitle,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.value
                }
              }
            }
          }]
        }]
      }
      let width = 400, height = 470
      // 在 SSR 模式下第一个参数不需要再传入 DOM 对象
      const chart = this.$echarts.init(null, null, {
        renderer: 'svg', // 必须使用 SVG 模式
        ssr: true, // 开启 SSR
        width,
        height
      });

      chart.setOption(chatOption);

      // 输出svg字符串
      const svgStr = chart.renderToSVGString();
      this.svgRadar = svgStr

    },

    // 获取学生信息
    getStu () {
      request({
        method: 'get',
        url: 'students/getStu',
        params: {
          Id: this.userId
        }
      }).then(res => {
        this.neweditForm = res.data
        this.stuId = this.neweditForm.id
        this.neweditForm.examMsg = JSON.parse(this.neweditForm.examMsg)
        this.getNotAdmitted()
        this.getPrintScheme()
        this.getPrintNewScheme()
      })
    },
    // 整理强基计划内容
    formatCheckMsg () {
      if (!this.neweditForm.checkMsg) {
        return
      }
      this.neweditForm.checkMsg.forEach(e => {
        this.channelsFirstData.forEach(data => {
          if (e === data.label) {
            data.value = true
          }
        })
        this.channelsSecondData.forEach(data => {
          if (e === data.label) {
            data.value = true
          }
        })
        this.channelsThirdData.forEach(data => {
          if (e === data.label) {
            data.value = true
          }
        })
        this.channelsForthData.forEach(data => {
          if (e === data.label) {
            data.value = true
          }
        })
      })
    },
    // 基础信息表格内容获取
    baseInitializeFn () {
      const user = JSON.parse(sessionStorage.getItem('user'))
      this.userId = user.userId
      if (user.userType == 3) {
        this.neweditForm = JSON.parse(localStorage.getItem('stu'))
        this.stuId = this.neweditForm.id
        this.neweditForm.examMsg = JSON.parse(this.neweditForm.examMsg)
        this.neweditForm.checkMsg = JSON.parse(this.neweditForm.checkMsg)
        this.getNotAdmitted()
        this.getPrintScheme()
        this.getPrintNewScheme()
        this.formatCheckMsg()
      } else if (user.userType == 4) {
        this.neweditForm = JSON.parse(localStorage.getItem('stu'))
        this.getStu()
      }
    }
  },
  created() {
    let infos = sessionStorage.getItem('activeName')
    if (infos != null && infos != undefined && infos != 'null') {
      this.activeName = infos
      sessionStorage.setItem('activeName', null)
    }
    this.baseInitializeFn()
  },
  watch: {
    activeName: {
      handler(newVal, oldVal) {
        if (newVal == 'first') {
          this.baseInitializeFn()
        } else if (newVal == 'second') {
          this.getMajor()
          this.getSubjectName()
        }
      }
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
// 颜色定义规范
$color-background = #fff
$color-background-d = rgba(0, 0, 0, 0.3)
$color-highlight-background = #333
$color-dialog-background = #666
$color-theme = #e96558
$color-theme-d = rgba(233, 101, 88, 0.5)

$color-text = #fff
$color-text-e = rgba(0, 0, 0, 0.1)
$color-text-d = rgba(0, 0, 0, 0.3)
$color-text-l = rgba(0, 0, 0, 0.5)
$color-text-ll = rgba(0, 0, 0, 0.8)

#show-results
  background: #fff
  font-size $font-size-medium
  color $color-text-ll
  word-wrap break-word
  word-break break-all


  #pdfDom
    background: #fff

  .result-section
    padding: 0

  .user-info
    font-size: 18px

  .user-info-tip
    font-size 18px

  .txt-c
    text-align center

  .title-set
    font-size $font-size-large-l
    font-weight 600

  .summary-title
    font-size $font-size-large

  .subtitle-set
    font-size $font-size-large

  .test-report
    font-size: $font-size-medium-x
    line-height 28px
    font-weight 600

  .histogram-section
    width: 400px
    height: 470px

  .chart-summary
    padding: 10px 10px
    border-radius: 4px


  .summary-txt
    padding-top: 12px
    line-height 28px
    text-indent: 2em;
    font-size: $font-size-medium-x

  .result-img-list
    padding: 20px

    img
      display block
      max-width 100%
      margin: 0 auto
      margin-bottom: 5px

  .btn-box
    padding: 20px 0
    text-align center
body, html {
  height: inherit
}

#answer
  text-align center

  .answer-section
    width: 900px
    margin 0 auto

  .test-title
    font-size $font-size-large-l
    color $color-text-ll
    font-weight 600
    text-align center

  .test-arrow
    color $color-text-d

  .test-schedule
    color $color-text-d

  .test-section
    text-align left
    padding 20px 0
    color $color-text-ll

    .topic
      padding-bottom: 10px
      font-size 30px
      line-height 40px
      font-weight 600

    .options-box
      display flex
      justify-items center
      align-items center
      cursor pointer
      width 400px
      margin 0 auto

      .option-content
        flex 1
        font-size $font-size-large
        line-height 32px
        font-weight 600

      .option-choose
        width 50px
        font-size 24px
        color: $color-text-l

        &.checked
          color: $color-theme

    .color-main
      color $color-theme

  .test-operate
    text-align center

  @media screen and (max-width: 768px) {
    .answer-section {
      width: auto
      padding 0 10px
    }

    .test-section {
      .options-box {
        width: 100%
      }
    }
  }

.jc {
  font-weight: bold;
}

.jl {
  font-size: 18px;
  font-weight: bold;
  margin-right: 2%;
  display: inline-block;
  width 10em
  margin-top 10px
}

.tp {
  width 100%
  margin auto
  line-height 30px
}

#dy #npt {
  top: 20%;
  right 5%;
  z-index: 99999;
  position: fixed;
}

#dy #npt1 {
  top: 20%;
  z-index: 99999;
  position: fixed;
  right 5%;
}

#npt1 button {
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: initial;
  padding: 0;
  text-align: center;
}

#npt1 button span {
  display: inline-block;
  margin: auto;
}

#dy {
  font-size 15px
  -webkit-print-color-adjust: exact
}

@media print {
  #baseData, #programme, #newschools, #major {

    * {
      -webkit-print-color-adjust: exact;
      -moz-print-color-adjust: exact;
      -ms-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    border: solid 1px #fff;
  }

}

#programmes table tr {

  page-break-inside: avoid;

}

#newschool table tr {

  page-break-inside: avoid;

}

//#dy .el-table {
//  border-color black
//  border-bottom 1px solid #000000
//  border-right 1px solid #000000
//}

#tables {
  width: 400px; //表格的宽度
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-spacing: 0; /*把单元格间隙设置为0*/
  // font-family: "宋体"
}

#tables th, td {
  height: 40px;
  font-weight: 400;
}

#result {
  tr {
    border-bottom 1px solid #d4d4d4
    height 50px
  }
}


</style>

<style lang="stylus" scoped>
pageWidth = 1400px
$color-theme = #f96630
$color-table-border = #999

.print-container
  width: pageWidth;
  margin: 0 auto;
  font-size: 14px;

  div
    box-sizing: border-box;

  .m-l-20
    margin-left 20px

  .b-r-l
    border-left: 1px solid $color-table-border;
  .b-r-r
    border-right: 1px solid $color-table-border;
  .p-0-10
    padding: 0 10px;
</style>

<style scoped media="print">
/*指定打印的分页*/
/deep/ section{
  page-break-after:always;
}

/*避免出现空白尾页*/
html,body,#app{
  height: 98% !important;
  margin: 0px;
  padding: 0px;
}
</style>
<style>
.print-container {
  width: 1400px;
  margin: 0 auto;
  font-size: 14px;
}

.print-container div {
  box-sizing: border-box;
}

.m-l-20 {
  margin-left: 20px
}

.m-t-20 {
  margin-top: 20px
}

.b-r-l {
 border-left: 1px solid #999;
}
.b-r-r {
  border-right: 1px solid #999;
}
.p-0-10 {
  padding: 0 10px;
}
.txt-l {
  text-align: left !important;
}

.base-data {
  width: 1050px;
  margin: auto;
  padding: 0;
}
.base-data .base-title {
  width: 100%;
  margin-top: 50px;
  font-size: 25px;
  color: #333;
  font-weight: 600;
  text-align: center
}

.base-data .base-table {
  margin: 50px auto;
  border: 1px solid #999;
}
.base-data .base-tr, .base-tr-other {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #999;
}
.base-data .base-tr:last-child {
  border-bottom: none
}
.base-data .base-tr > div {
  flex: 1;
  min-height: 33px;
  line-height: 33px;
  padding: 0 10px;
  text-align: center;
  border-right: 1px solid #999
}
.base-data .base-tr > div:last-child {
  border-right: none
}
.base-data .base-tr-other > div {
  width: 10%;
  min-height: 33px;
  line-height: 33px;
  padding: 0 10px;
  text-align: center;
  border-right: 1px solid #999
}
.base-data .base-tr-other > div:nth-child(2n-1) {
  font-weight: 600;
}
.base-data .base-tr-other > div:last-child {
  border-right: none;
}
.base-data .title-th {
  font-size: 16px;
  font-weight: 600;
}
.base-data .remark-box {
  min-height: 60px !important;
  text-align: left !important;
}
.base-data .base-tr-other .w-10 {
  flex: 1;
  padding: 0 !important;
  min-height: 33px;
  line-height: 33px;
}
.base-data .base-tr-other .w-20 {
  flex: 2;
  padding: 0 !important;
  min-height: 33px;
  line-height: 33px;
}
.base-data .base-tr .flex-4 {
  flex: 4;
  padding: 0 !important;
  min-height: 33px;
  line-height: 33px;
}
.base-data .base-tr .flex-5 {
  flex: 5;
  padding: 0 !important;
  min-height: 33px;
  line-height: 33px;
}
.base-data .base-tr .flex-8 {
  flex: 8;
  padding: 0 !important;
  min-height: 33px;
  line-height: 33px;
  display: flex;
  align-items: center;
}
.base-data .base-tr .flex-8 > div {
  flex: 1;
  min-height: 33px;
  text-align: center;
  border-right: 1px solid #999
}
.base-data .base-tr .flex-8 > div:last-child {
  border-right: none
}
.base-data .base-tr .intention-apply-tr {
  display: flex;
  align-items: center;
  padding: 0 !important;
}
.base-data .apply-left {
  flex: 1;
}
.base-data .apply-right {
  flex: 9;
}
.base-data .apply-right .el-checkbox {
  width: 80px;
}
.base-data .checked-section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.base-data .checked-section .checked-box {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.base-data .checked-section .checked-box-active {
  color: #f96630;
}
.base-data .checked-section .checked-box .inner-box {
  position: relative;
  margin-right: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
}
.base-data .checked-section .checked-box .inner-box-active {
  position: relative;
  margin-right: 10px;
  border: 1px solid #f96630;
  border-radius: 2px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
}

.base-data .child-box {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #999;
}
.base-data .child-box:last-child {
  border-bottom: none;
}
.base-data .child-left {
  flex: 1.5;
  padding: 0 10px;
  border-left: 1px solid #999;
  border-right: 1px solid #999;
}
.base-data .child-right {
  flex: 8.5;
  padding: 0 10px;
}
.base-data .score-tr div {
  flex: 0.7;
}
/* 专业方向 start */
.report-section {
  width: 1050px;
  padding: 0;
}
.report-section .report-content {
  width: 1050px;
  margin: 50px auto;
}
.report-section .report-title {
  width: 100%;
  margin: 40px auto;
  font-weight: bold;
  font-size: 25px;
  text-align: center;
}
.report-section .report-desc {
  line-height: 28px;
  font-size: 14px;
  color: #333;
}
.report-section .report-desc-title {
  padding: 30px 0;
  line-height: 40px;
  font-size: 18px;
  color: #000;
  font-weight: 600;
}
.report-section .subject-test {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0 30px;
}

.report-section .subject-test .test-content {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.3%;
  height: 50px;
  padding: 0 10px;
}

.report-section .subject-test .test-content .name {
  width: 48px;
  color: #333333;
}

.report-section .subject-test .test-content .rate-box {
  width: 186px;
  padding-left: 10px;
  cursor: pointer;
}

.report-section .subject-test .test-content .del {
  width: 40px;
  text-align: right;
  color: #FC6621;
  cursor: pointer;
}
/* 专业方向 end */
</style>
